/*
User: shy
Date: 2024-04-10 14:28
All rights reserved by Kong Fanqun
*/
<template>
  <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
    <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
    <template #pulling="props">
      <img
          class="doge"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
          :style="{ transform: `scale(${props.distance / 80})` }"
      />
    </template>

    <!-- 释放提示 -->
    <template #loosing>
      <img
          class="doge"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
      />
    </template>

    <!-- 加载提示 -->
    <template #loading>
      <img
          class="doge"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"
      />
    </template>
    <p>刷新次数: {{ count }}</p>
  </van-pull-refresh>
</template>

<script setup>
import { ref } from 'vue';
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};
</script>

<style scoped>
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
</style>